﻿@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<br />
<b>Create artist:</b><br />
<b>Name:</b> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="artistName"/>
<br />
<br />
<br />
<br />
<input type="button" value="Create artist" onclick="CreateArtist()" />


<br />
<br />

<hr width="900" />

<b>Create song:</b><br /><br />
<b>Title:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Title"/>
<br />
<br />
<b>Release date:</b>
    <input type="date" id ="ReleaseDate"/>
<br />
<br />
<b>Price:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Price"/>
<br />
<br />
<b>Genre:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Genre"/>
<br />
<br />
<b>Composer:</b>&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Composer"/>
<br />
<br />
<b>Lyricist:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Lyricist"/>
<br />
<br />
<b>Duration:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Duration"/>
<br />
<br />
<b>Artist(s):</b><br />
 @{
     int checkBoxNumber = 0;
  }
    @foreach (var artist in ViewBag.artists)
    {
        <input type="checkbox" id="@("boxArtist" + checkBoxNumber)"/>
        
        <input type="text" id="@("checkBoxArtist" + checkBoxNumber)" name ="@(artist.ID)" hidden="hidden"/>
       
       <label for="@("boxArtist" + checkBoxNumber)"> @Html.Raw(artist.Name) </label>

        checkBoxNumber++;
        
        <br />
    }
    <input type="text" id="checkBoxCountArtist" value="@(checkBoxNumber)" hidden="hidden"/>
<br />
<br />
<br />
<br />
<input type="button" value="Create song" onclick="CreateSong()" />


<br />
<br />

<hr width="900" />
<b>Create album:</b><br /><br />
<b>Title:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="albumTitle"/>
<br />
<br />
<b>Release date:</b>
    <input type="date" id ="albumReleaseDate"/>
<br />
<br />
<b>Price: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp$</b>
    <input type="text" id ="albumPrice"/>
<br />
<br />
<b>Song:</b><br />
<select id="songInAlbum">

   @foreach (var song in ViewBag.songs)
   {
        string artistName = "";
        for (int i = 0 ; i < song.Artists.Count ; i++)
        {
            if (i != 0)
            {
                artistName = artistName + " & " + song.Artists[i].Name;
            }
            else
            {
                artistName = song.Artists[i].Name;
            }
        }
       <option value="@song.ID">@Html.Raw(song.Title + " by " + artistName)</option>
   }
</select>
<br />

<input type="button" value="Create album" onclick="CreateAlbum()" />







@* -- SCRIPTS -- *@
<script>
    var title = "";
    var releaseDate = "";
    var price = "";
    var genre = "";
    var composer = "";
    var lyricist = "";
    var artists = "";
    var duration = "";
    var songID = "";

    function CreateSong() {
        title = document.getElementById("Title").value;
        releaseDate = document.getElementById("ReleaseDate").value;
        price = document.getElementById("Price").value;
        genre = document.getElementById("Genre").value;
        composer = document.getElementById("Composer").value;
        lyricist = document.getElementById("Lyricist").value;
        duration = document.getElementById("Duration").value;

        var artistID;


        var checkBoxCount = parseInt(document.getElementById("checkBoxCountArtist").value);
        var first = "true";
        for (i = 0; i < checkBoxCount; i++) {
            checkBox = document.getElementById("boxArtist" + i);
            checkBoxStatus = checkBox.checked;

            if (checkBoxStatus == true) {
                box = document.getElementById("checkBoxArtist" + i);
                artistID = box.getAttribute("name");
                if (first == "true") {
                    artists = artistID;
                    first = "false";
                }
                else {
                    artists = artists + ';' + artistID;
                }

            }

        }

        if (title == "" || releaseDate == "" || price == "" || genre == "" || composer == "" || lyricist == "" || duration == "" || artists == "") {
            alert("Please fill in all fields!");
        }
        else {
            CreateSongPost();
        }
    }

    function CreateSongPost() {
        XMLhttpCreateSong = new XMLHttpRequest();
        XMLhttpCreateSong.open("POST", "/Products/CreateSongAjax", true);
        XMLhttpCreateSong.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpCreateSong.onreadystatechange = CreateSongReqReady;
        sendStrCreateSong = "title=" + title + "&releaseDate=" + releaseDate + "&price=" + price + "&genre=" + genre + "&composer=" + composer + "&lyricist=" + lyricist + "&duration=" + duration + "&artists=" + artists;
        XMLhttpCreateSong.send(sendStrCreateSong);
    }


    function CreateSongReqReady() {
        if (XMLhttpCreateSong.readyState == 4 && XMLhttpCreateSong.status == 200) {
            //status is inside
            alert(XMLhttpCreateSong.responseText);
            document.getElementById("refresh").click();

        } else if (XMLhttpCreateSong.readyState == 4) {
            alert("error! code: " + XMLhttpCreateSong.status);
        }
    }
</script>


<form action="/Products/Create" method="post">
    <input type="submit" id="refresh" hidden="hidden"/>
</form>





@* -- SCRIPTS -- *@
<script>
    var title = "";
    var releaseDate = "";
    var price = "";
    var name = "";

    function CreateAlbum() {
        title = document.getElementById("albumTitle").value;
        releaseDate = document.getElementById("albumReleaseDate").value;
        price = document.getElementById("albumPrice").value;
        songID = document.getElementById("songInAlbum").value;

        if (title == "" || releaseDate == "" || price == "") {
            alert("Please fill in all fields!");
        }
        else {
            CreateAlbumPost();
        }
    }

    function CreateAlbumPost() {
        XMLhttp = new XMLHttpRequest();

        XMLhttp.open("POST", "/Products/CreateAlbumAjax", true);
        XMLhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttp.onreadystatechange = CreateAlbumReqReady;
        sendStr = "title=" + title + "&releaseDate=" + releaseDate + "&price=" + price + "&songID=" + songID;
        XMLhttp.send(sendStr);
    }
    

    function CreateAlbumReqReady() {
        if (XMLhttp.readyState == 4 && XMLhttp.status == 200) {
            //status is inside
            alert(XMLhttp.responseText);
            document.getElementById("refresh").click();

        } else if (XMLhttp.readyState == 4) {
            alert("error! code: " + XMLhttp.status);
        }
    }


    function CreateArtist() {
        name = document.getElementById("artistName").value;

        if (name == "") {
            alert("Please fill in all fields!");
        }
        else {
            CreateArtistPost();
        }
    }

    function CreateArtistPost() {
        XMLhttpA = new XMLHttpRequest();

        XMLhttpA.open("POST", "/Products/CreateArtistAjax", true);
        XMLhttpA.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpA.onreadystatechange = CreateArtistReqReady;
        sendStrA = "name=" + name;
        XMLhttpA.send(sendStrA);
    }


    function CreateArtistReqReady() {
        if (XMLhttpA.readyState == 4 && XMLhttpA.status == 200) {
            //status is inside
            alert(XMLhttpA.responseText);
            document.getElementById("refresh").click();

        } else if (XMLhttpA.readyState == 4) {
            alert("error! code: " + XMLhttpA.status);
        }
    }
</script>

